<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <title>CSS Cursor Style</title>
</head>
<body>
    <div class="main-area">
        <div class="heading-box">
            <h1><i class="fa fa-mouse-pointer" aria-hidden="true"></i> CSS Cursor Styles</h1>
            <p>Hover over each below box and view different cursor styles</p>
        </div>
        <div class="cursor-box">
            <div class="each-box b-1">
                <p>auto</p>
            </div>
            <div class="each-box b-2">
                <p>default</p>
            </div>
            <div class="each-box b-3">
                <p>none</p>
            </div>
            <div class="each-box b-4">
                <p>context-menu</p>
            </div>
            <div class="each-box b-5">
                <p>help</p>
            </div>
            <div class="each-box b-6">
                <p>pointer</p>
            </div>
            <div class="each-box b-7">
                <p>progress</p>
            </div>
            <div class="each-box b-8">
                <p>wait</p>
            </div>
            <div class="each-box b-9">
                <p>cell</p>
            </div>
            <div class="each-box b-10">
                <p>crosshair</p>
            </div>
            <div class="each-box b-11">
                <p>text</p>
            </div>
            <div class="each-box b-12">
                <p>vertical-text</p>
            </div>
            <div class="each-box b-13">
                <p>alias</p>
            </div>
            <div class="each-box b-14">
                <p>copy</p>
            </div>
            <div class="each-box b-15">
                <p>move</p>
            </div>
            <div class="each-box b-16">
                <p>no-drop</p>
            </div>
            <div class="each-box b-17">
                <p>not-allowed</p>
            </div>
            <div class="each-box b-18">
                <p>all-scroll</p>
            </div>
            <div class="each-box b-19">
                <p>col-resize</p>
            </div>
            <div class="each-box b-20">
                <p>row-resize</p>
            </div>
            <div class="each-box b-21">
                <p>n-resize</p>
            </div>
            <div class="each-box b-22">
                <p>e-resize</p>
            </div>
            <div class="each-box b-23">
                <p>s-resize</p>
            </div>
            <div class="each-box b-24">
                <p>w-resize</p>
            </div>
            <div class="each-box b-25">
                <p>ne-resize</p>
            </div>
            <div class="each-box b-26">
                <p>nw-resize</p>
            </div>
            <div class="each-box b-27">
                <p>se-resize</p>
            </div>
            <div class="each-box b-28">
                <p>sw-resize</p>
            </div>
            <div class="each-box b-29">
                <p>ew-resize</p>
            </div>
            <div class="each-box b-30">
                <p>ns-resize</p>
            </div>
            <div class="each-box b-31">
                <p>nesw-resize</p>
            </div>
            <div class="each-box b-32">
                <p>nwse-resize</p>
            </div>
            <div class="each-box b-33">
                <p>zoom-in</p>
            </div>
            <div class="each-box b-34">
                <p>zoom-out</p>
            </div>
            <div class="each-box b-35">
                <p>grab</p>
            </div>
            <div class="each-box b-36">
                <p>grabbing</p>
            </div>
        </div>
    </div>
    <footer>
        <p>Designed & Developed by <a href="https://github.com/RahulSahOfficial">Rahul Sah</a></p>
    </footer>
</body>
</html>